<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
    <base-input
            :aaa="aaaa" ccc="2222"
            v-model="username"
            placeholder="Enter your username"
    ></base-input>
    <br><br><br>
    <base-checkbox v-model="lovingVue"></base-checkbox>{{lovingVue}}
    <br><br><br>
    <!-- 动态给组件传递值 -->
    <input type="text" v-model="dongtai">
    <child2 v-bind:my-messagea="dongtai"></child2>
</div>
<script>
    //$attr inheritAttrs     https://www.jianshu.com/p/ce8ca875c337
    Vue.component('base-input', {
        inheritAttrs: false,
        props: ['label', 'value'],
        computed: {
            inputListeners: function () {
                var vm = this
                // `Object.assign` 将这些对象合并在一起，构成一个新的对象
                console.log(this.$listeners);
                return Object.assign({},
                    // 我们在父组件中添加的所有监听器
                    this.$listeners,
                    // 然后我们可以新增自定义的监听器，
                    // 或覆盖掉一些监听器的行为。
                    {
                        // 这里确保组件能够正常运行 v-model 指令
                        input: function (event) {
                            vm.$emit('input', event.target.value)
                        }
                    }
                )
            }
        },
        template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `,
        created:function(){
            console.log(this)//注意这里
        }
    })

    Vue.component('base-checkbox', {
        //将checked作为该组件被使用时v-model能取到的值，event说，我emit ‘change’事件的时候，参数的值就是父组件v-model收到的值。
        model: {
            prop: 'checked',
            event: 'change'
        },
        props: {
            checked: Boolean
        },
        template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
    })

    Vue.component("child2", {
        props: {
            //验证
            myMessagea: {
                type: Number, //多种验证以数组形式 [String, Number]
                required: true,
                default : 1 // 默认值可以以方法的形式 function {return '';}
            }
        },
        template: '<div>{{myMessagea}}</div>'
    })

    new Vue({
        el: "#app",
        data: {
            aaaa:4444,
            dongtai: 2,
            lovingVue : false,
            username : ''
        },
        watch: {
            lovingVue: function (val) {
                console.log(val)
            }
        }
    })
</script>
</body>
</html>
